{% comment %}
    Renders a product thumbnail with a modal-opener

    Accepts:
    - media: {Object} Product Media object
    - position: {String} Position of the media. Used for accessible label.
    - loop: {Boolean} Enable video looping (optional)
    - modal_id: {String} The product modal that will be shown by clicking the thumbnail
    - xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model

    Usage:
    {% render 'display-product-thumbnail',
      media: media,
      position: forloop.index,
      loop: section.settings.enable_video_looping,
      modal_id: section.id
    %}
{% endcomment %}

  <modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
  
    {% if media.position == 1  %}
       <p>Lime Green</p>
    {% elsif media.position == 2  %}
      <p>Midnight Black</p>
    {% elsif media.position == 3 %}
      <p>Sky Blue</p>
    {% elsif media.position == 4 %}
      <p>Light Grey</p>
   {% elsif media.position == 5  %}
      <p>Arctic Blue</p>
   {% endif  %}

    <div class="product__media media media--transparent" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
      <img
        srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
          {% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
          {% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: '750x' }} 750w,{% endif %}
          {% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w,{% endif %}
          {% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: '1500x' }} 1500w,{% endif %}
          {{ media.preview_image | img_url: 'master' }} {{ media.preview_image.width }}w"
        src="{{ media | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
        loading="lazy"
        width="576"
        height="{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}"
        alt="{{ media.preview_image.alt | escape }}"
      >
    </div>
  </modal-opener>
  

  